<template>
  <div>
    <h1>人员名单及爱好列表</h1>
    <ul>
      <!-- <Item v-for="p in person" :key="p.id" :name="p.name" :hobby="p.hobby" /> -->

      <!-- props传值的时候 批量展开传递 -->
      <Item v-for="p in person" :key="p.id" v-bind="p" />
    </ul>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {
      person: [
        { id: 1, name: "老余", hobby: ["吃", "喝", "Piao"] },
        { id: 2, name: "陈伟", hobby: ["唱", "跳", "Rap"] },
        { id: 3, name: "老李", hobby: ["打球", "看书", "写字"] },
      ],
    };
  },
};
</script>

<style></style>
